<template>
	<view class="page">
		<!-- 头部 -->
		<view class="header ex-mall-header" @touchmove.stop.prevent>
			<!-- #ifdef MP-WEIXIN -->
			<view class="ex-mall-header-mp-weixin-fill" :class="[$themeClass('header-title-color')]">商品详情</view>
			<!-- #endif -->
			<view class="header-background" :class="[$themeClass('header-bg-color')]"
				:style="{ opacity: headerOpacity }">
			</view>
			<view class="ex-mall-header-content">
				<view class="ex-mall-header-left">
					<view class="ex-mall-header-btn" @click="$util.navigateBack"
						:class="[$themeClass('header-btn-left-another-bg-color')]">
						<text class="ex-mall-header-btn-icon ri-arrow-left-s-line"
							:class="[$themeClass('header-btn-left-icon-another-color')]"></text>
					</view>
				</view>
				<view class="ex-mall-header-title" :class="[$themeClass('header-title-color')]"
					:style="{ opacity: headerOpacity }">商品详情</view>
				<view class="ex-mall-header-right">
					<view class="cart ex-mall-header-btn" :class="[$themeClass('search-btn-bg-color')]"
						@click="$switchTab('shoppingcart')">
						<text v-if="shoppingCartTotal === 0" class="ex-mall-header-btn-icon ri-shopping-cart-line"
							:class="[$themeClass('search-btn-color')]"></text>
						<text v-else class="ex-mall-header-btn-text" :class="[$themeClass('search-btn-color')]">{{
							shoppingCartTotal > 99 ? '99+' : shoppingCartTotal }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="pictures" :style="{ top: `${pictureTop}px` }">
			<swiper class="swiper" indicator-dots circular>
				<swiper-item class="swiper-item" v-for="(x, xi) in goods.pics" :key="xi">
					<view class="picture">
						<image class="img" :src="'http://39.107.96.20:8888/' + x.pics_big" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="btns">
				<view class="btn favorite">
					<text class="icon ri-bookmark-line"></text>
				</view>
				<view class="btn share">
					<text class="icon ri-share-forward-line"></text>
				</view>
			</view>
		</view>

		<view class="content" :class="[$themeClass('goods-content-bg-color')]">
			<view class="title" :class="[$themeClass('goods-title-color')]">{{ goods.goods_name }}</view>
			<view class="price" :class="[$themeClass('goods-price-color')]">单价:{{ goods.goods_price }}元</view>
			<view class="desc" :class="[$themeClass('goods-desc-color')]">剩余库存：{{ goods.goods_number }}件</view>
			<view class="property">
				<view class="property-item">
					<view class="title" :class="[$themeClass('goods-title-color')]">后端技术架构</view>
					<view class="option">
						<view class="option-item" :class="[$themeClass('goods-property-option-active')]">Java:SpringBoot
						</view>
						<view class="option-item">Java:SSM</view>
						<view class="option-item">Python</view>
						<view class="option-item">NodeJS</view>
					</view>
				</view>
				<view class="property-item">
					<view class="title" :class="[$themeClass('goods-title-color')]">前端技术架构</view>
					<view class="option">
						<view class="option-item">Vue</view>
						<view class="option-item">React</view>
						<view class="option-item">bootstrap</view>
						<view class="option-item">Uniapp</view>
						<view class="option-item">WxCode</view>
						<view class="option-item" :class="[$themeClass('goods-property-option-active')]">layui</view>
						<view class="option-item">elementui</view>
						<view class="option-item">Antd</view>
					</view>
				</view>
			</view>
			<view class="details">
				<view class="title" :class="[$themeClass('goods-title-color')]">图文详情</view>
				<view class="content">
					<view v-html="goods.goods_introduce"></view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="btns">
				<view class="btn spec" @click="scrollSpec">
					<text>查看所用技术</text>
					<text class="icon ri-arrow-right-s-fill"></text>
				</view>
				<view class="btn buy" @click="addCart"
					:class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]">
					<text>加入购物车</text>
				</view>
			</view>
		</view>

		<view class="cart-ball" :class="[$themeClass('search-btn-bg-color'), shoppingCartBallShow && 'show']"
			:style="{ top: `${shoppingCartBall.y - 10}px`, left: `${shoppingCartBall.x - 10}px` }"></view>
	</view>
</template>

<script>
var transparentHeight = uni.getSystemInfoSync().windowWidth
import config from '@/config'
export default {
	data() {
		return {
			headerOpacity: 0,
			pictureTop: 0,
			shoppingCartBall: {},
			shoppingCartBallShow: false,
			shoppingCartBallMoving: false,
			shoppingCartTotal: 0,
			goods: {
				pictures: [{
					url: '/static/goods/1.jpg'
				}, {
					url: ''
				}, {
					url: ''
				}],
				details: [{
					type: 'image',
					url: '/static/goods/1.jpg'
				}, {
					type: 'image',
					url: '/static/goods/1.jpg'
				}, {
					type: 'image',
					url: '/static/goods/1.jpg'
				}]
			}
		}
	},
	onPageScroll(e) {
		var scrollTop = e.scrollTop <= 0 ? 0 : e.scrollTop
		var opacityCoefficient = scrollTop / transparentHeight
		var opacity = opacityCoefficient > 1 ? 1 : opacityCoefficient
		this.headerOpacity = opacity
		this.pictureTop = -scrollTop / 4
	},
	//初始化加载getgoods方法
	onLoad(data) {
		this.getgoods(data.id);
	},
	methods: {
		scrollSpec() {
			uni.createSelectorQuery().select(".page").boundingClientRect(page => {
				uni.createSelectorQuery().select(".header").boundingClientRect(header => { //目标节点
					uni.createSelectorQuery().select(".content > .property").boundingClientRect(property => {
						uni.pageScrollTo({
							duration: 150,
							scrollTop: property.top - page.top - header.height
						})
					}).exec()
				}).exec()
			}).exec()
		},
		getgoods(id) {
			uni.request({
				url: config.baseUrl + '/goods/' + id, //仅为示例，并非真实接口地址。
				method: 'get',
				header: {
					'Authorization': uni.getStorageSync('token')  //获取session中的token
				},
				success: (res) => {
					console.log(res.data.data);
					this.goods = res.data.data
				}
			});
		},
		//更新购物车数量
		updateCart(cartItem) {
			console.log(cartItem.count, '更新购物车数量')
			cartItem.count += 1
			uni.request({
				url: config.baseUrl + '/shopCart/' + cartItem.id,
				method: 'post',
				data: {
					count: cartItem.count
				},
				header: {
					"Authorization": uni.getStorageSync('token')
				},
				success: res => {
					uni.showToast({
						title: '更新成功',
						icon: 'none'
					})
				}
			})
		},
		//新增的时候需要先查询下购物车是否有
		getShopCart(data) {
			let userInfo = uni.getStorageSync('userInfo')
			let dataArr = []
			let num = 0
			uni.request({
				url: config.baseUrl + '/shopCart/' + userInfo.id,
				method: 'get',
				header: {
					"Authorization": uni.getStorageSync('token')
				},
				success: res => {
					//所有数据
					console.log(res.data.data, '购物车')
					dataArr = res.data.data
					dataArr.forEach((x, xi) => {
						//判断是否有
						if (x.goods_id == data.goods_id) {
							//有  更新购物车数量
							this.updateCart(x)
							num++
						}
					})
					if (num == 0) {
						//没有  新增购物车
						uni.request({
							url: config.baseUrl + '/shopCart',
							method: 'post',
							data: {
								goods_id: data.goods_id,
								user_id: userInfo.id,
								goods_big_logo: data.goods_big_logo,
								goods_price: data.goods_price,
								goods_name: data.goods_name,
								count: 1
							},
							header: {
								"Authorization": uni.getStorageSync('token')
							},
							success: res => {
								//提醒添加成功
								uni.showToast({
									title: '添加成功',
									icon: 'none'
								})
							}
						})
					}
				}
			})
		},
		addCart(e) {
			if (this.shoppingCartBallMoving) return

			this.shoppingCartBallMoving = true
			this.shoppingCartBall = {
				x: e.detail.x,
				y: e.detail.y
			}
			this.shoppingCartBallShow = true
			uni.createSelectorQuery().select(".ex-mall-header-btn.cart").boundingClientRect(data => {
				setTimeout(() => {
					this.shoppingCartBall = {
						x: data.left + data.width / 2,
						y: data.top + data.height / 2
					}
				}, 10)
				setTimeout(() => {
					this.shoppingCartBallShow = false
					this.shoppingCartBallMoving = false
					this.shoppingCartTotal++
				}, 590)
			}).exec()
			this.getShopCart(this.goods)
		}
	}
}
</script>

<style lang="scss">
.page {
	&>.header {
		.header-background {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
		}
	}

	&>.pictures {
		position: sticky;
		top: 0;
		z-index: 0;
		/* #ifndef MP-WEIXIN */
		margin-top: calc(-70px - var(--status-bar-height));
		/* #endif */
		/* #ifdef MP-WEIXIN */
		margin-top: calc(-70px - var(--status-bar-height) - 50px);
		/* #endif */
		width: 100vw;
		height: 118vw;

		&>.swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				&:nth-child(3n-2) {
					.picture {
						&>.img {
							background-color: #5A9494;
						}
					}
				}

				&:nth-child(3n-1) {
					.picture {
						&>.img {
							background-color: #9B927D;
						}
					}
				}

				&:nth-child(3n) {
					.picture {
						&>.img {
							background-color: #96824C;
						}
					}
				}
			}

			.picture {
				width: 100%;
				height: 100%;

				&>.img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}

		&>.btns {
			position: absolute;
			/* #ifndef MP-WEIXIN */
			top: calc(70px + var(--status-bar-height));
			/* #endif */
			/* #ifdef MP-WEIXIN */
			top: calc(70px + var(--status-bar-height) + 50px);
			/* #endif */
			right: 28px;
			display: flex;
			flex-direction: column;

			&>.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 38px;
				height: 38px;
				margin-bottom: 16px;
				border-radius: 12px;
				overflow: hidden;

				&>.icon {
					font-size: 18px;
				}

				&.favorite {
					background-color: #FFFFFF;

					&>.icon {
						color: #292929;
					}
				}

				&.share {
					background-color: #CFCFCF;

					&>.icon {
						color: #FFFFFF;
					}
				}
			}
		}
	}

	&>.content {
		position: relative;
		z-index: 1;
		margin-top: -34px;
		padding: 0 28px calc(54px + 18px + 18px + (env(safe-area-inset-bottom) / 2)) 28px;
		border-radius: 34px 34px 0 0;

		&>.title {
			padding-top: 34px;
			font-size: 23px;
			font-weight: 600;
		}

		&>.price {
			margin-top: 24px;
			font-size: 15px;
			font-weight: 600;
		}

		&>.desc {
			margin-top: 18px;
			font-size: 13px;
		}

		&>.property {
			&>.property-item {
				margin-top: 36px;

				&>.title {
					font-size: 14px;
					font-weight: 600;
				}

				&>.option {
					display: flex;
					flex-wrap: wrap;

					&>.option-item {
						display: inline-flex;
						justify-content: center;
						align-items: center;
						min-width: 54px;
						margin: 12px 12px 0 0;
						padding: 12px 14px;
						line-height: 1.3;
						font-size: 13px;
						background-color: #F7F7F7;
						box-sizing: border-box;
						border-radius: 12px;
					}
				}
			}
		}

		&>.details {
			width: 100%;
			margin-top: 36px;

			&>.title {
				margin-bottom: 12px;
				font-size: 14px;
				font-weight: 600;
			}

			&>.content {
				width: 100%;

				.img {
					display: block;
					width: 100%;
				}
			}
		}
	}

	&>.footer {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		padding: 18px 28px calc(18px + (env(safe-area-inset-bottom) / 2)) 28px;
		background-color: #FFFFFF;
		border-radius: 34px 34px 0 0;
		overflow: hidden;

		&>.btns {
			display: flex;

			&>.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 54px;
				font-size: 13px;
				font-weight: 600;
				border-radius: 12px;

				&.spec {
					flex: 0.4;
					border: 1px solid #292929;
					box-sizing: border-box;

					&>.icon {
						font-size: 16px;
					}
				}

				&.buy {
					flex: 0.6;
					margin-left: 10px;
				}
			}
		}
	}

	.cart-ball {
		position: fixed;
		z-index: 300;
		display: none;
		width: 20px;
		height: 20px;
		border-radius: 100%;
		transition: all 0.5s;
		box-shadow: 0 4px 8px #4D4D4D;

		&.show {
			display: block;
		}
	}
}
</style>
